<template>
  <div class="resume-project-list">
    <div class="list-header">
      <h3 class="section-title">项目经验</h3>
      <el-button type="primary" @click="addProject">
        <el-icon><plus /></el-icon>
        添加项目经验
      </el-button>
    </div>

    <!-- 项目经验列表 -->
    <div class="project-list" v-if="projects.length > 0">
      <div 
        v-for="(project, index) in projects" 
        :key="project.id || index"
        class="project-item"
      >
        <div class="item-header">
          <div class="item-title">
            <span class="name">{{ project.name }}</span>
            <span class="role">{{ project.role }}</span>
          </div>
          <div class="item-actions">
            <el-button-group>
              <el-button 
                type="primary" 
                link
                @click="editProject(index)"
              >
                编辑
              </el-button>
              <el-button 
                type="danger" 
                link
                @click="removeProject(index)"
              >
                删除
              </el-button>
            </el-button-group>
          </div>
        </div>
        <div class="item-content">
          <div class="date-range">
            {{ project.startDate }} - {{ project.endDate }}
          </div>
          <div class="description" v-if="project.description">
            {{ project.description }}
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <el-empty
      v-else
      description="暂无项目经验"
    >
      <el-button type="primary" @click="addProject">
        添加项目经验
      </el-button>
    </el-empty>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑项目经验' : '添加项目经验'"
      width="600px"
      @close="resetForm"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        @submit.prevent
      >
        <el-form-item label="项目名称" prop="name">
          <el-input 
            v-model="formData.name"
            placeholder="请输入项目名称"
          />
        </el-form-item>

        <el-form-item label="担任角色" prop="role">
          <el-input 
            v-model="formData.role"
            placeholder="请输入您在项目中担任的角色"
          />
        </el-form-item>

        <el-form-item label="项目时间">
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item prop="startDate">
                <el-date-picker
                  v-model="formData.startDate"
                  type="month"
                  placeholder="开始时间"
                  style="width: 100%"
                  value-format="YYYY-MM"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">至</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="endDate">
                <el-date-picker
                  v-model="formData.endDate"
                  type="month"
                  placeholder="结束时间"
                  style="width: 100%"
                  value-format="YYYY-MM"
                  :disabled="formData.isCurrentProject"
                />
                <div class="mt-2">
                  <el-checkbox v-model="formData.isCurrentProject">
                    进行中
                  </el-checkbox>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="项目描述" prop="description">
          <el-input
            v-model="formData.description"
            type="textarea"
            :rows="6"
            placeholder="请描述项目的背景、您的职责和取得的成果"
          />
          <div class="form-tips">
            <p>写好项目描述的小技巧：</p>
            <ul>
              <li>简要说明项目背景和目标</li>
              <li>描述您在项目中的具体职责和贡献</li>
              <li>强调项目取得的成果和影响</li>
              <li>突出使用的技术栈和解决的难点</li>
            </ul>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm" :loading="submitting">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

// 定义props
const props = defineProps({
  modelValue: {
    type: Array,
    required: true
  }
})

// 定义emit
const emit = defineEmits(['update:modelValue'])

// 计算属性：项目经验列表
const projects = computed(() => props.modelValue || [])

// 更新项目经验列表
const updateProjects = (value) => {
  emit('update:modelValue', value)
}

// 表单ref
const formRef = ref(null)

// 状态
const dialogVisible = ref(false)
const submitting = ref(false)
const isEdit = ref(false)
const currentIndex = ref(-1)

// 表单数据
const formData = ref({
  name: '',
  role: '',
  startDate: '',
  endDate: '',
  isCurrentProject: false,
  description: ''
})

// 监听是否为当前项目
watch(() => formData.value.isCurrentProject, (newValue) => {
  if (newValue) {
    formData.value.endDate = '进行中'
  } else {
    formData.value.endDate = ''
  }
})

// 表单校验规则
const formRules = {
  name: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请输入担任角色', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  startDate: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  endDate: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请填写项目描述', trigger: 'blur' },
    { min: 10, message: '项目描述不能少于10个字符', trigger: 'blur' }
  ]
}

// 添加项目经验
const addProject = () => {
  isEdit.value = false
  currentIndex.value = -1
  dialogVisible.value = true
}

// 编辑项目经验
const editProject = (index) => {
  const project = projects.value[index]
  formData.value = {
    ...project,
    isCurrentProject: project.endDate === '进行中'
  }
  isEdit.value = true
  currentIndex.value = index
  dialogVisible.value = true
}

// 删除项目经验
const removeProject = async (index) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条项目经验吗？',
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    const newProjects = [...projects.value]
    newProjects.splice(index, 1)
    updateProjects(newProjects)
    ElMessage.success('删除成功')
  } catch {
    // 用户取消删除
  }
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  formData.value = {
    name: '',
    role: '',
    startDate: '',
    endDate: '',
    isCurrentProject: false,
    description: ''
  }
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitting.value = true
    
    // 构造项目经验数据
    const projectData = { ...formData.value }
    
    // 更新项目经验列表
    const newProjects = [...projects.value]
    if (isEdit.value && currentIndex.value > -1) {
      newProjects[currentIndex.value] = projectData
    } else {
      newProjects.push(projectData)
    }
    updateProjects(newProjects)
    
    // 关闭对话框
    dialogVisible.value = false
    ElMessage.success(isEdit.value ? '修改成功' : '添加成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    submitting.value = false
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.css';

.resume-project-list {
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    
    .section-title {
      font-size: var(--font-size-lg);
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }
  }
  
  .project-list {
    .project-item {
      background: var(--color-white);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-md);
      padding: var(--spacing-lg);
      margin-bottom: var(--spacing-lg);
      position: relative;

      &:last-child {
        margin-bottom: 0;
      }

      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-md);

        .project-info {
          flex: 1;

          .project-name {
            font-size: var(--font-size-lg);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: var(--spacing-xs);
          }

          .role {
            color: var(--text-secondary);
            font-size: var(--font-size-md);
          }
        }

        .date-range {
          color: var(--text-secondary);
          font-size: var(--font-size-sm);
        }
      }

      .description {
        color: var(--text-secondary);
        line-height: var(--line-height-normal);
        white-space: pre-line;
      }

      .action-buttons {
        position: absolute;
        top: var(--spacing-md);
        right: var(--spacing-md);
        display: none;
        gap: var(--spacing-sm);
      }

      &:hover {
        .action-buttons {
          display: flex;
        }
      }
    }
  }

  .form-tips {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: var(--color-background);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    
    p {
      color: var(--text-secondary);
      margin: 0 0 var(--spacing-xs);
    }
    
    ul {
      margin: 0;
      padding-left: var(--spacing-lg);
      color: var(--text-secondary);
      
      li {
        margin-bottom: var(--spacing-xs);
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  .text-center {
    text-align: center;
  }
  
  .mt-2 {
    margin-top: var(--spacing-sm);
  }

  @media (max-width: 768px) {
    .project-item {
      padding: var(--spacing-md);

      .action-buttons {
        display: flex;
        position: static;
        justify-content: flex-end;
        margin-top: var(--spacing-md);
      }
    }
  }
}
</style> 